<template>
  <div class="data">
    <div class="content">
      <div class="title">截止{{ covData.modifyTime | time }}全国数据统计</div>
      <ul class="wrap">
        <li>
          <div class="number"><span>较昨日</span>{{ covData.currentConfirmedIncr | number }}</div>
          <div class="bold">{{ covData.currentConfirmedCount | division }}</div>
          <strong>现存确诊</strong>
        </li>
        <li>
          <div class="number"><span>较昨日</span>{{ covData.suspectedIncr | number }}</div>
          <div class="bold">{{ covData.suspectedCount | division }}</div>
          <strong>境外输入</strong>
        </li>
        <li>
          <div class="number"><span>较昨日</span>{{ covData.seriousIncr | number }}</div>
          <div class="bold">{{ covData.seriousCount | division }}</div>
          <strong>现存无症状</strong>
        </li>
        <li>
          <div class="number"><span>较昨日</span>{{ covData.confirmedIncr | number }}</div>
          <div class="bold">{{ covData.confirmedCount | division }}</div>
          <strong>累计确诊</strong>
        </li>
        <li>
          <div class="number"><span>较昨日</span> {{ covData.deadIncr | number }}</div>
          <div class="bold">{{ covData.deadCount | division }}</div>
          <strong>累计死亡</strong>
        </li>
        <li>
          <div class="number"><span>较昨日</span> {{ covData.curedIncr | number }}</div>
          <div class="bold">{{ covData.curedCount | division }}</div>
          <strong>累计治愈</strong>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    covData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  filters: {
    // 数字>0 补+
    number: function (val) {
      val = val > 0 ? '+' + val : val
      if (val === 0) {
        return ''
      }
      return val
    },
    division: function (num) {
      if (num === undefined) return ''
      return num.toLocaleString()
    },
    time: function (time) {
      time = new Date().toLocaleString('chinese', { hour12: false })
      return time
    }
  },
  created () {},
  components: {},
  computed: {},
  methods: {}
}
</script>
<style lang="less" scoped>
.data {
  background: #f5f5f5;
  padding-top: 0.3rem;
  .content {
    background: #fff;
    padding: 0.3rem;
    min-height: 2rem;
    border-radius: 0.2rem 0.2rem 0 0;
    .title {
      height: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.26rem;
      font-weight: bolder;
      border-left: 0.1rem solid rgb(20, 49, 128);
      padding: 0.1rem;
      margin-bottom: 0.2rem;
    }
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.2rem;
    border-radius: 0.1rem;
    box-shadow: 0 0 3px 2px rgba(194, 192, 192, 0.2);
    li {
      width: 33.33333%;
      text-align: center;
      margin-bottom: 0.24rem;
      position: relative;
      font-size: 0.24rem;
      .number {
        span {
          color: #777;
          font-weight: bold;
        }
      }
      strong {
        color: #333;
      }
    }
    li::after {
      content: '';
      display: block;
      position: absolute;
      right: 1px;
      top: 0.2rem;
      height: 0.8rem;
      border-right: 1px solid #eee;
    }
    li:nth-child(3n)::after {
      content: '';
      border-right: 0;
    }
    .bold {
      font-weight: bold;
      font-size: 0.36rem;
    }
    li:nth-child(1) {
      color: red;
    }
    li:nth-child(2) {
      color: rgb(18, 143, 14);
    }
    li:nth-child(3) {
      color: orange;
    }
    li:nth-child(4) {
      color: rgb(189, 19, 98);
    }
    li:nth-child(5) {
      color: rgb(223, 208, 7);
    }
    li:nth-child(6) {
      color: rgb(8, 110, 194);
    }
  }
}
</style>
